<template>
  <view>
    <view class="title"> <view class="bl"></view>需求信息 </view>
    <form @submit="submit">
      <view class="dev-box base-info">
        <view class="info-item">
          <view class="text">需求类型</view>
          <view class="select-box">
            <picker
              @change="selectBangbType"
              :value="bangb.bangbType"
              :range="bangbTypeArrays"
              name="bangbType"
            >
              <input
                class="padding-20"
                disabled="true"
                placeholder="请选择需求类型"
                :value="bangb.bangbType"
                style="margin-left: 20upx"
              />
            </picker>
          </view>
        </view>
        <view class="info-item">
          <view class="text">工作方式</view>
          <view class="select-box">
            <picker
              @change="selectMode"
              :value="bangb.mode"
              :range="modeArray"
              name="mode"
            >
              <input
                class="padding-20"
                disabled="true"
                placeholder="请选择工作方式"
                :value="bangb.mode"
                style="margin-left: 20upx"
              />
            </picker>
          </view>
        </view>
        <view class="info-item">
          <view class="text">标题</view>
          <input
            v-model="bangb.title"
            type="text"
            maxlength="50"
            name="title"
            placeholder="请填写标题"
          ></input>
        </view>
        <view class="info-item">
          <view class="text">报酬</view>
          <input
            v-model="bangb.money"
            name="money"
            type="number"
            maxlength="6"
            placeholder="请填写报酬"
          ></input>
        </view>
        <view class="info-item">
          <view class="text">截止时间</view>
          <!-- <input v-model="job.endUserTime" type="text" placeholder="请填写报名截止时间"></input> -->
          <view class="select-box">
            <input
              @click="endTimeShow = true"
              class="padding-20"
              disabled="true"
              placeholder="请选择需求截止时间"
              :value="bangb.endTime"
              style="margin-left: 20upx"
              name="endTime"
            />
          </view>
        </view>
        <view class="info-item">
          <view class="text">联系电话</view>
          <input
            v-model="bangb.mobile"
            type="number"
            maxlength="11"
            placeholder="请填写联系方式"
            name="mobile"
          ></input>
        </view>
        <view class="info-item">
          <view class="text">微信号</view>
          <Input
            v-model="bangb.wx"
            type="text"
            placeholder="请填写微信号"
            name="wx"
          ></Input>
        </view>
        <view class="info-item" style="flex-direction: column">
          <view class="text" style="text-align-last: left; text-align: left"
            >需求描述</view
          >
          <textarea
            v-model="bangb.describes"
            type="text"
            maxlength="500"
            placeholder="请填写需求描述"
            name="describes"
			style="height: 240upx;"
          ></textarea>
        </view>
      </view>
      <button class="submitBtn"  form-type="submit" :disabled="btnShow">
        提交
      </button>
    </form>

    <u-datetime-picker
      :show="endTimeShow"
      v-model="endTime"
      mode="datetime"
      @confirm="endTimeShowConfirm"
    ></u-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      city: '湖南省-长沙市-芙蓉区',
      startTimeShow: false,
      endTimeShow: false,
      endUserTimeShow: false,
      startTime: Number(new Date()),
      endTime: Number(new Date()),
      endUserTime: Number(new Date()),
      bangb: {
		id: '',
        money: 0,
        endTime: '',
        mobile: '',
        wx: '',
        bangbType: '',
        title: '',
        mode: '',
        urgent: '',
        sex: '',
		describes: '',
		
      },
      btnShow: false,
      bangbTypeArrays: [
        '打卡签到',
        '写作业',
        '毕业设计',
        '门票抢购',
        '跑腿',
        '拉票',
        '送礼物',
        '求资源',
        '助力',
        '陪聊',
      ],
      modeArray: ['线上', '线下'],
    };
  },
  onLoad(options) {
	    console.log('Page loaded',options.id);
	    let  id = options.id;
		this.bbbDetails(id);
  },
  onReady() {},
  methods: {
	  
	 async bbbDetails(id) {
	 	let response = await this.$apis.bbbDetails({id:id});
			try {
							
				 var examine="";
				//var id=id;
			    this.bangb.money =  response.money;
				this.bangb.id =  id;
			    this.bangb.mobile = response.mobile;
			    this.bangb.wx = response.wx;
			    this.bangb.title = response.title;
			    this.bangb.mode = response.mode;
			    this.bangb.urgent = response.urgent;
			    this.bangb.sex = response.sex;
				 this.bangb.bangbType = response.bangbType;
		         this.bangb.endTime = response.endTime;
				  this.bangb.describes = response.describes;
				  
			  } catch (error) {
			    console.error(error);
			  }
		},
		
	  async submit(e) {
		  var formdata = e.detail.value;
		  
		  // uni.showModal({
		  //   content: '表单数据内容：' + JSON.stringify(formdata),
		  //   showCancel: false,
		  // });
		  // return;
		  let txt = '';
		  if (this.bangb.title == '' || this.bangb.title == null) {
		    txt = '需求内容不能为空！';
		  } else if (this.bangb.title) {
		  }
		  if (txt != null && txt != '') {
		    uni.showToast({
		      title: txt,
		      icon: 'none',
		      position: 'bottom',
		    });
		    return;
		  }
		  
		  let res = await this.$apis.bbbEdit(this.bangb);
				if(res){
					uni.showToast({
						title:'提交成功',
						duration:2000,
						success: () => {
							setTimeout(()=>{
								uni.navigateBack();
							},2000)
						}
					})
					//uni.navigateBack({});
				}
				
		  
	  },
    endTimeShowConfirm(e) {
      const timeFormat = uni.$u.timeFormat;

      let timeValue = timeFormat(e.value, 'yyyy-mm-dd hh:MM');
	  
	  
      this.bangb.endTime = timeValue + ':00'; //value2为页面上的日期
      this.endTimeShow = false;
    },
    selectBangbType(e) {
      this.bangb.bangbType = this.bangbTypeArrays[e.target.value];
    },
    selectMode(e) {
      this.bangb.mode = this.modeArray[e.target.value];
    },

  },
};
</script>

<style lang="scss">
    .title {
    margin: 20upx 4% 20upx 4%;
    font-weight: bold;
    font-size: $font-size-34;
    line-height: 50upx;
    .bl {
        border-radius: 6upx;
        float: left;
        margin-right: 20upx;
        background-color: #36b957;
        margin-top: 5upx;
        height: 40upx;
        width: 10upx;
    }
    }
    .base-info {
    padding: 0;
    .info-item {
        display: flex;
        border-bottom: 1px solid #f2f2f2;
        margin: 0upx 25upx;
        padding: 10rpx 0;
        .text {
        text-align-last: justify;
        font-size: 28upx;
        flex:1;
        width: 64upx;
        text-align: center;
        line-height: 76upx;
        font-weight: bold;
        }
        .select-box {
        flex: 4;
        background-image: url('@/static/img/icons-black.png');
        background-repeat: no-repeat;
        background-position: 95% 50%;
        background-size: 20upx 30upx;
        text {
            margin-left: 40upx;
            font-size: 28upx;
            line-height: 76upx;
        }
        }
        input {
        flex: 4;
        height: 42upx;
        padding: 20upx;
        padding-left: 0;
        margin-left: 20px;
        }
        .space {
        flex: 4;
        }
    }
    }
    .submitBtn {
    margin: 40upx 4% 20upx 4%;
    width: 92%;
    height: 80upx;
    line-height: 80upx;
    color: white;
    border-radius: 35upx;
    background-color: #5fdb7e;
    }
</style>
